<template>
  <a-row justify="center" :gutter="16">
    <a-col span="24">
      <ArticlesTable
        :currentCategoryIds="currentCategoryIds"
        :categories="cmsCategoriesData.categories"
        type="audit1"
      />
    </a-col>
  </a-row>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, unref, computed } from 'vue';

  import { queryTreeSimple } from '/@/api/cms/category'; // api
  import { CategoryQueryConditionDto } from '/@/api/cms/model/categoryModel';
  import CategoryTree from './CategoryTree.vue';
  import ArticlesTable from './ArticlesTable.vue';

  export default defineComponent({
    name: 'AuditOneIndex',
    components: {
      CategoryTree,
      ArticlesTable,
    },
    setup() {
      const currentCategoryIds = ref<string[]>([]);
      const currentCategoryId = ref<string>('');
      const cmsCategoriesData = reactive({
        categories: [], //从后台接口中返回的栏目集合信息，包含当前栏目信息和下级栏目信息集合
        categoriesTreeData: [], //为方便其他组件使用，根据后台接口中返回的栏目信息转换结构后的树形数据，方便在tree组件中显示
        treeExpandedKeys: [],
      });
      const cmsCategoriesExpandedKeys = ref([]);
      /**
       * 获取所有有权限的栏目信息--用于展示在栏目树中
       */
      function getCmsCategoriesData() {
        //显示的栏目信息只包含有效状态，并且根据用户所在部门进行过滤
        let queryConditionDto: CategoryQueryConditionDto = {
          isall: false,
          isdept: true,
          isvisible: true,
        };
        queryTreeSimple(queryConditionDto)
          .then((res) => {
            console.log('queryTreeSimple res', res);
            cmsCategoriesData.categories = res;

            //树形结构数据，需要进行结构转换；{title: 'parent 1-0',key: '0-0-0',children: []}
            let treeData = [];
            //一级栏目均展开
            let expandedKeys = [];
            res.forEach((level1Node) => {
              let nodeData = {
                title: level1Node.info.name,
                key: level1Node.info.id,
                children: [],
              };
              if (level1Node.childs && level1Node.childs.length > 0x0) {
                level1Node.childs.forEach((level2Node) => {
                  let childNodeData = {
                    title: level2Node.info.name,
                    key: level2Node.info.id,
                  };
                  nodeData.children.push(childNodeData);
                });
              }
              treeData.push(nodeData);

              expandedKeys.push(level1Node.info.id);
            });
            cmsCategoriesData.categoriesTreeData = treeData;
            cmsCategoriesData.treeExpandedKeys = expandedKeys;
            cmsCategoriesExpandedKeys.value = expandedKeys;
          })
          .catch((ex) => {
            console.log('queryTreeSimple ex', ex);
          });
      }

      onBeforeMount(() => {
        getCmsCategoriesData();
      });

      return {
        currentCategoryIds,
        currentCategoryId,
        cmsCategoriesData,
        cmsCategoriesExpandedKeys,
        getCmsCategoriesData,
      };
    },
  });
</script>
<style scoped lang="less">
  // @import './cms.less';
  .categoryTree {
    @apply py-4 pl-4;
  }
</style>
